<template>
  <div class="contentDiv">
    <component :is="componentDiv"></component>
    <div style="position: fixed; bottom: 0">
      <a-button type="" @click="change"> 切换组件 </a-button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, shallowRef, ref } from "vue";
import Carousel1 from "@/components/carousel/index.vue";
import axios from "axios";
import List1 from "@/components/list/index.vue";

//这里用ref的话，vue给出警告Vue接收到一个组件，该组件被制成反应对象。这可能会导致不必要的性能开销，应该通过将组件标记为“markRaw”或使用“shallowRef”而不是“ref”来避免。
// 如果使用 markRaw 那么componentDiv将不永远不会再成为响应式对象。 所以得使用 shallowRef

const componentDiv = shallowRef(Carousel1);
const change = () => {
  componentDiv.value = componentDiv.value === Carousel1 ? List1 : Carousel1;
};

const arr = [{ num: 1 }, { num: 2 }, { num: 3 }];

arr.sort(function (x1, x2) {
  if (x1.num < x2.num) {
    return -1; //升序
  }
  if (x1.num > x2.num) {
    return 1; //降序
  }
  return 0;
});
console.log(arr);
const saveAs = (blob, filename) => {
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename);
  } else {
    let link = document.createElement("a");
    let body = document.querySelector("body");
    link.href = window.URL.createObjectURL(blob);
    link.download = filename; // fix Firefox
    link.style.display = "none";
    body.appendChild(link);
    link.click();
    body.removeChild(link);
    window.URL.revokeObjectURL(link.href);
  }
};

axios({
  url:'https://fbzh-dev.oss-cn-hangzhou.aliyuncs.com/lw/addEditNewsPdf/bZ2MKvdrdoxU3R84PE3Zm/ghhJ4WNR27O-VpPn5EiZ-工薪守护系统应用情况检查时间通知.pdf',
  method: "get",
  responseType: "blob",
}).then((res) => {
  
  saveAs(res.data,'11111')
});
</script>

<style lang="scss" scoped></style>
